/**
 * Created by Freeman on 2018/1/20.
 */
import React from 'react'
import {Image, StyleSheet, TouchableOpacity} from 'react-native'
import PropTypes from 'prop-types'
import {COLOR, width} from "../../config";
import NavigationItem from "../base/NavigationItem";
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view'
import ChannelView from "./ChannelView";

class HomeScreen extends React.Component {

  static navigationOptions = ({navigation}: any) => ({
    headerTitle: (
      <TouchableOpacity style={styles.searchBar}>
        <Image source={require('../../res/img/search_icon.png')} style={styles.searchIcon}/>
      </TouchableOpacity>
    ),
    headerRight: (
      <NavigationItem
        icon={require('../../res/img/icon_navigation_item_message_white.png')}
        onPress={() => {
          navigation.navigate('Web', {
            uri: 'http://www.mifanxing.com/quizs',
            title: '测测你的音乐EQ吧'
          })
        }}
      />
    ),
    headerLeft: (
      <NavigationItem
        icon={{uri: 'http://static.budee.com/yyren/image/channel/mifanxing.png'}}
        titleStyle={{color: 'white'}}
        onPress={() => {

        }}
      />
    ),
    headerStyle: {
      backgroundColor: COLOR.backgroundDarkLighter,
      //paddingTop: StatusBar.currentHeight
    },
  })

  componentDidMount() {
    const {actions} = this.props
    actions.fetchChannels()
  }

  render() {
    const {navigation, channels} = this.props
    return (
      <ScrollableTabView
        style={styles.container}
        renderTabBar={() => <ScrollableTabBar/>}
      >
        {
          channels.map(channel =>
            <ChannelView key={channel.id} id={channel.id} tabLabel={channel.channelName} navigation={navigation}/>
          )
        }
      </ScrollableTabView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchBar: {
    width: width * 0.7,
    height: 30,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    alignSelf: 'center',
  },
  searchIcon: {
    width: 20,
    height: 20,
    margin: 5,
  }
})


HomeScreen.propTypes = {
  topics: PropTypes.array,
  actions: PropTypes.object,
}

export default HomeScreen
